<template xmlns:text-aligin="http://www.w3.org/1999/xhtml">
  <div>
    <!--顶部空白-->
    <div style="height: 3rem;" ></div>
    个人信息<br>
    <div class="text"> <span>姓名</span> <span class="text1">{{name}}</span></div><br>
    <div class="text2"> <span >身份证</span><span class="text3">{{identity}}</span></div>
    <van-form @submit="onSubmit">
<!--      <van-field v-model="form.name" name="姓名" label="姓名" />-->
<!--      <van-field  v-model="form.identity" name="身份证号" label="身份证号"  disabled="true"/>-->
      <van-field type="password"  v-model="form.oldPassword" name="原密码" label="原密码" placeholder="请输入旧密码" :rules="passwordRule"/>
      <van-field type="password" v-model="form.newPassword" name="新密码" label="新密码" placeholder="请输入新密码" :rules="passwordRule"/>
      <div style="margin: 16px;">
        <van-button plain block type="info" native-type="submit">修改</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import userApi from "@/api/userApi";
import {Toast} from "vant";

export default {
  name: 'Setting',
  data() {
    return {
      id:'',
      name:'',
      identity:'',
      form: {
        oldPassword:'',
        newPassword:''
      },
      passwordRule: [{
        required: true,
        trigger: "onBlur"
      },
        {
          validator: value => {
            return /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/.test(value);
          },
          message: "密码必须为6~20位数字+英文字母"
        }
          ],
    }
  },
  methods: {

    onSubmit() {
      // 从localStorage获取用户id
      var userInfo = JSON.parse(localStorage.getItem("userInfo"));
      this.id = userInfo.id
      this.$axios({
        method: 'get',
        url: 'http://localhost:8085/loginHandler/updatePassword/' + this.id+"/"+this.form.oldPassword+"/"+this.form.newPassword,
      }).then(res => {
        if (res.data.code === 200) { // 修改密码成功
          Toast("修改密码成功");
          this.$router.push({
            path: `/antigenHome`
          })
        } else { // 修改密码失败
          Toast(res.data.message)
          this.$router.push("/Setting")
        }
      })
    },
    registerPhone() {
      this.$router.push('/register')
    },
    showInformation(){
      var userInfo = JSON.parse(localStorage.getItem("userInfo"));
      this.id = userInfo.id
      this.$axios({
        method: 'get',
        url: 'http://localhost:8085/loginHandler/showUserInformation/' + this.id,
      }).then(res => {
        if (res.data.code === 200) {
          let ret=res.data.data;
          var userInfo = JSON.parse(localStorage.getItem("userInfo"));
this.identity=userInfo.identity;
this.name=userInfo.name;
        }
        else{
          Toast("error")
        }
          })
        }
  },
created() {
     this.showInformation()
}
}
</script>

<style>
.text{
  position:absolute;
  margin-left: 24px;
  font-size: 14px;
}
.text1{
  position: absolute;
  margin-left: 55px;
  width: 60px;
}
.text2{
  position: relative;
  margin-right: 325px;
  font-size: 14px;
}
.text3{
  position: absolute;
  margin-left: 57px;
}
</style>

